<script lang="ts" setup>
withDefaults(
  defineProps<{
    title?: string;
    padding?: boolean;
  }>(),
  {
    title: '未命名示例',
    padding: true,
  },
);

const isExpanded = ref(false);
</script>

<template>
  <div class="rounded-bl-lg border-l border-b border-gray-300 bg-black/25">
    <!-- 标题栏 -->
    <div class="flex max-w-xs items-center justify-between p-1">
      <!-- 标题 -->
      <span :title="title" class="overflow-hidden overflow-ellipsis whitespace-nowrap text-white">{{ title }}</span>

      <!-- 按钮 -->
      <div
        v-if="$slots.default"
        class="ml-0.5 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-full bg-slate-700/50 hover:bg-sky-600"
        @click="isExpanded = !isExpanded"
      >
        <div
          :class="[
            'h-0.5 w-3 bg-white',
            isExpanded || 'before:absolute before:z-10 before:h-0.5 before:w-3 before:rotate-90 before:bg-white',
          ]"
        />
      </div>
    </div>

    <!-- 内容插槽 -->
    <div v-if="$slots.default" v-show="isExpanded" :class="['border-t pt-1 text-white', padding && 'px-1 pb-1']">
      <slot />
    </div>
  </div>
</template>

<style scoped></style>
